<template>
  <div class="pinpaiCollect-container">
		<div class="headerbanner">
			<img class="purchse_banner block" :src="collectObj.bigImage">
		</div>
		<!--品牌征集人数报名信息-->
		<div class="applyMain">
			<div class="appltT f16" v-text="collectObj.brandName"></div>
			<div class="applyPeople">
				<span class="gray">本期人数:<b class="deepRed currentP">146</b>人</span>
				<span class="gray ml20">累计报名:<b class="deepRed totalP">1601</b>人</span>
			</div>
			<div class="wbox wmiddle quantity">
				<div class="wbox_img"><img class="wbox_ren" src="../../assets/images/info/pep@2x.png"/></div>
				<div class="gundong wfl f14 gundong_list">
					<ul class="" ref="gundongList" :class="{anim:animate==true}">
						<!-- <li ref="gundongList" :class="{anim:animate==true}" v-for="(item,index) in reprotList" :key="index">
								<span class="people_name">张**</span>
								<span class="gundong_phnoe">136000000</span> 报名成功
						</li> -->
						<!-- <li style="margin-top: 0px;">
							<span class="people_name">张**</span>
							<span class="gundong_phnoe">136000000</span> 报名成功
						</li> -->
						<li>
							<span class="people_name">张**</span>
							<span class="gundong_phnoe">136000000</span> 报名成功
						</li>
					</ul>
				</div>
			</div>
		</div>
		<p class="borderBottom solid"></p>
		
		<!--详情-->
		<div class="pinTips">
			<span class="gray"><i class="iconic iconic1"></i>预计开团：</span>
			<p class="tipsCont">业主越多，价格越低！开团筹备中……</p>
			<span class="gray"><i class="iconic iconic2"></i>直采地点：</span>
			<p class="tipsCont">正规卖场或店面，具体开团地点以短信通知为准</p>
			<span class="gray"><i class="iconic iconic3"></i>直采价格：</span>
			<p class="tipsCont">直采现场公布<i class="wenhao"></i></p>
	    </div>
		
		<!--商品详情-->
		<div class="productDetails">
			<div class="hd">
				<h3>-商品详情-</h3>
			</div>
			<div class="bd"></div>
		</div>
		<!--底部按钮-->
		<!-- <div class="collectFooter">
			<a class="whiteBtn f16 block">联系客服</a>
			<button class="btn redBtn f16">立即购买</button> -->
			<!--<button class="btn grayBtn f16">即将开始</button>-->
		<!-- </div> -->
		<!--置顶-->
		<div class="Stick">
			<a href="#"><img src="../../assets/images/info/zhiding@2x.png" alt="" /></a>
		</div>
</div>
</template>
<script>
import { fetch } from "../../api/index";
export default {
  data() {
    return {
      timer: 0,
      collectObj: {},
      reprotList: [],
      animate: false
    };
  },
  created() {
    this.timer = setInterval(this.scroll, 2000); // 在钩子函数中调用我在method 里面写的scroll()方法，注意此处不要忘记加this,我在这个位置掉了好几次坑，都是因为忘记写this。
    this.pinpaiInfo();
  },
  mounted() {
    //手机号中间四位隐藏
    let a = "15601321445";
    let b = a.substring(0, 3);
    let c = a.substring(a.length, a.length - 4);
    let num = `${b}....${c}`;
    // console.log(num);
  },
  beforeDestroy() {
    clearInterval(this.timer); //设定时器及时清除
  },
  methods: {
    scroll() {
      //   console.log(this.$refs)
      let gundongList = this.$refs.gundongList;
      gundongList.style.marginTop = "-15px";
      this.animate = !this.animate;
      var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
      setTimeout(function() {
        that.reprotList.push(that.reprotList[0]);
        that.reprotList.shift();
        gundongList.style.marginTop = "0px";
        that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
      }, 1000);
    },
    async pinpaiInfo() {
      let data = {
        collectId: 49
      };
      let res = await fetch("/api/collectInfo", data);
      console.log(res);
      if (res.code == 200) {
        this.collectObj = res.obj.collectVo;
      }
    },
  /* backTop() {
    console.log(11)
  } */
  }
}
</script>
<style scoped>
.pinpaiCollect-container {
  text-align: left;
}
.headerbanner {
  height: 250px;
}
.headerbanner img {
  height: 100%;
}
.block {
  display: block;
}
.gray {
  color: #888888;
  font-size: 14px;
}
.padd {
  padding: 0 16px;
}
.line-through {
  text-decoration: line-through;
}
.deepRed {
  color: #da1a1e;
}
.borderBottom {
  border-bottom: 1px solid rgba(238, 238, 238, 1);
}
/*banner——start*/
.slideBox .bd li .o-time {
  position: absolute;
  width: 100%;
  text-align: center;
  height: 35px;
  line-height: 35px;
  background-color: rgba(218, 26, 30, 1);
  opacity: 0.8;
  color: #fff;
  bottom: 0;
}
.slideBox .bd li .o-time em {
  font-style: normal;
}
.slideBox .tempWrap .pagination {
  position: absolute;
  z-index: 1;
  bottom: 47px;
  right: 16px;
  width: 100%;
  text-align: right;
  line-height: 0;
}
.slideBox .tempWrap .pagination .pagination-bullet {
  display: inline-block;
  width: 6px;
  height: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 1);
  opacity: 0.9;
  margin: 0 4px;
  vertical-align: top;
  overflow: hidden;
}
.slideBox .tempWrap .pagination .pagination-active {
  background-color: rgba(218, 26, 30, 1);
}
/*banner——end*/
.mainDetails .detailMoeny {
  background-color: #fff;
  padding-top: 21px;
}
.mainDetails .detailMoeny .lt {
  line-height: 0;
}
.mainDetails .detail-box span .newPrice {
  font-size: 24px;
}
.mainDetails .detailMoeny .originalPrice {
  margin-left: 11px;
}
.mainDetails .detailMoeny .discount {
  width: 38px;
  height: 17px;
  background-color: rgba(216, 183, 141, 1);
  border-radius: 2px;
  color: #fff;
  font-size: 11px;
  padding: 3px 6px;
  margin-left: 11px;
}
.mainDetails .detail-box .detailTitle {
  color: #27272b;
  margin-top: 20px;
  margin-bottom: 11.5px;
}
.mainDetails .detailContent {
  padding: 12px 16px 15px 16px;
  background-color: #fff;
}
/*标语*/
.mainDetails .slogan {
  height: 50px;
  line-height: 50px;
  background-color: rgba(255, 243, 243, 1);
  color: #333333;
  margin-top: 12px;
}
.mainDetails .slogan .icon_hand {
  display: inline-block;
  width: 20px;
  height: 17px;
  background: url(../../assets/images/info/jijie@2x.png) no-repeat;
  background-size: cover;
  vertical-align: sub;
  margin-right: 16.5px;
}
/*活动*/
.mainDetails .activity {
  background-color: #fff;
  color: #555;
  height: 94px;
  padding: 17.5px 16px;
  box-sizing: border-box;
}
.mainDetails .activity .activity_red {
  display: inline-block;
  font-weight: normal;
  width: 38px;
  height: 17px;
  line-height: 17px;
  background-color: rgba(255, 243, 243, 1);
  border-radius: 2px;
  border: solid 1px rgba(218, 26, 30, 1);
  text-align: center;
  margin: 0 12.5px 0 16px;
  color: #da1a1e;
}
.mainDetails .activity .activity_det {
  color: #555555;
}
.mainDetails .activity .marginL {
  margin-left: 47.5px;
}
/*选择*/
.mainDetails .choice {
  position: relative;
  height: 45px;
  line-break: 45px;
  background-color: #fff;
  margin: 12px 0;
}
.mainDetails .choice .choiceText {
  color: #333333;
  margin-left: 16px;
}
.mainDetails .choice:after {
  content: "";
  width: 9px;
  height: 9px;
  font-size: 0;
  position: absolute;
  top: 50%;
  right: 18px;
  margin-top: -4.5px;
  border-right: 1px solid #888;
  border-top: 1px solid #888;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.mainDetails .collectTips {
  padding-left: 17px;
  background-color: #fff;
}
.mainDetails .collectTips .collectTips_d {
  margin-top: 11.5px;
}
.mainDetails .collectTips > h2 {
  font-weight: normal;
  color: #333333;
  padding: 16px 0;
}
.collectTips .tipsCont,
.pinTips .tipsCont {
  padding-left: 20px;
  color: #333;
  font-size: 14px;
  margin: 10px 0;
}
.mainDetails .collectTips .tipsCont li {
  padding-bottom: 15px;
}
/*商家信息*/
.mainDetails .merchant {
  background-color: #fff;
  margin: 12px 0;
  padding-left: 16px;
}
.mainDetails .merchant .merchant_c {
  height: 42px;
  line-height: 42px;
}
.mainDetails .merchant .kefu {
  padding-right: 16px;
}
.mainDetails .merchant .kefu > i {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url(../../assets/images/info/zitidianhua@2x.png);
  background-size: cover;
}
.mainDetails .merchant .kefu > a {
  color: #caab83;
}
.mainDetails .merchant .merchantAddress {
  padding: 12px 0;
}
/*商品详情*/
.productDetails {
  background-color: #fff;
  /* margin-bottom: 65px; */
}
.productDetails .hd {
  box-shadow: 0px 0px 20px 0px rgba(96, 96, 96, 0.1);
  font-size: 14px;
  font-weight: normal;
}
.productDetails .hd h3 {
  font-weight: normal;
  color: #333333;
  text-align: center;
  height: 51px;
  line-height: 51px;
}
/*底部按钮*/
.collectFooter {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 65px;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 20px 0px rgba(96, 96, 96, 0.1);
  padding: 10px 16px;
  box-sizing: border-box;
  display: -webkit-flex;
  flex-direction: wrap;
}
.collectFooter .whiteBtn {
  height: 46px;
  line-height: 46px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 5px;
  border: solid 1px rgba(204, 204, 204, 1);
  color: #333333;
  text-align: center;
  box-sizing: border-box;
  flex: 0 0 109px;
}
.collectFooter .btn {
  color: #fff;
  margin-left: 16px;
  border-radius: 5px;
  height: 46px;
  line-height: 46px;
  flex: 1;
}
.collectFooter .redBtn {
  background-color: rgba(218, 26, 30, 1);
}
.collectFooter .grayBtn {
  background-color: rgba(204, 204, 204, 1);
  display: none;
}
/*置顶*/
.Stick {
  position: fixed;
  bottom: 12%;
  right: 4%;
}
.Stick img {
  width: 45px;
  height: 45px;
}

/*线下直采详情页-已报名与未登录*/
.warpperT .zs_wrap {
  padding: 12px;
}
.applyMain {
  padding: 0 16px;
  background-color: #fff;
  padding-bottom: 16px;
}
.applyMain .appltT {
  color: #27272b;
  padding: 16px 0;
}
.applyMain .applyPeople {
  margin-bottom: 10px;
}
.applyMain .wbox_img .wbox_ren {
  width: 15px;
  height: 12px;
  margin-right: 7px;
  padding-left: 16px;
}
.applyMain .quantity {
  height: 40px;
  background-color: rgba(244, 244, 244, 1);
  border-radius: 2px;
  position: relative;
}
.applyMain .quantity:before {
  position: absolute;
  top: -19px;
  left: 10px;
  content: "";
  width: 0px;
  height: 0px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #f4f4f4 transparent;
}
/*滚动*/
.gundong_list {
  height: 15px;
  line-height: 15px;
  overflow: hidden;
}
.gundong_list > ul {
  height: 45px;
}
.anim {
  transition: all 1s;
}
.gundong_list li {
}
.gundong_list span {
  margin-right: 55px;
}
.solid {
  margin-left: 16px;
}
.pinTips {
  padding: 17px;
  background-color: #fff;
  text-align: left;
}
.pinTips .iconic {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url(../../assets/images/info/yujikaituan@2x.png) no-repeat;
  background-size: cover;
  margin-right: 6.5px;
  vertical-align: middle;
}
.pinTips .iconic2 {
  background: url(../../assets/images/info/zhicaididian@2x.png) no-repeat;
  background-size: cover;
}
.pinTips .iconic3 {
  background: url(../../assets/images/info/zhicaijiage@2x.png) no-repeat;
  background-size: cover;
}
.pinTips .wenhao {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url(../../assets/images/info/wenhao.png) no-repeat;
  background-size: cover;
  margin-left: 6.5px;
  vertical-align: sub;
}
</style>
